/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\pages\SystemSettings\StatementOfAccountConfig\EconomicBusinessConfig\components\PlanTable.tsx
 * @Date: 2022-03-28 11:23:01
 * @LastEditTime: 2022-04-13 11:34:30
 */
import UdSelect from '@/components/UdFormControls/UdSelect'
import { columnRenders, IUdColumn, UdTable } from '@/lib'
import { randomNumber } from '@/utils/methods'
import { useSafeState, useUpdateEffect } from 'ahooks'
import { Button } from 'antd'
import React from 'react'

interface IProps {
  getFinancialField: () => void
  memoizedGetHandType: () => void
  updateCalcConditionList: (params) => void
  onChange: (params) => void
  value: any
  formValues: any
}

const PlanTable = (props: IProps) => {
  const { getFinancialField, memoizedGetHandType, value = [], updateCalcConditionList, onChange } = props
  const [tableData, setTableData] = useSafeState<any[]>([...value])

  useUpdateEffect(() => {
    let list = props.value || []
    for (let i = 0; i < list.length; i++) {
      list[i]['name'] = `计算条件${i + 1}`
    }
    setTableData([...list])
    updateCalcConditionList([...list])
  }, [props.value])

  function triggerChange(params) {
    let { record, index, key, fieldValue, type } = params
    let newTableData = [...tableData]
    if (type === 'add') {
      let dataItem = {
        vid: randomNumber(7),
        name: `计算条件${newTableData.length + 1}`,
        calculationType: '2',
        calculationOn: 'DDZE',
        mode: '+',
        calculationTw: 'DDZE',
      }
      newTableData.splice(newTableData.length, 0, dataItem)
    } else if (type === 'delete') {
      newTableData.splice(index, 1)
    } else {
      let newRecord = { ...record, [key]: fieldValue }
      newTableData.splice(index, 1, newRecord)
    }
    setTableData([...newTableData])
    if (onChange) {
      updateCalcConditionList([...newTableData])
      onChange([...newTableData])
    }
  }

  const columns: IUdColumn<any>[] = [
    {
      title: '计算条件',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      minWidth: '100px',
    },
    {
      title: '计算值1',
      dataIndex: 'calculationOn',
      align: 'center',
      minWidth: '160px',
      render: (text, record, index) => (
        <UdSelect
          options={getFinancialField()}
          showSearch={true}
          optionFilterProp="children"
          value={text + ''}
          onChange={value => {
            triggerChange({ record, index, key: 'calculationOn', fieldValue: value })
          }}
        />
      ),
    },
    {
      title: '计算方式',
      dataIndex: 'mode',
      key: 'mode',
      align: 'center',
      width: 90,
      render: (text, record, index) => (
        <UdSelect
          options={memoizedGetHandType()}
          showSearch={true}
          optionFilterProp="children"
          value={record.mode + ''}
          onChange={value => {
            triggerChange({ record, index, key: 'mode', fieldValue: value })
          }}
        />
      ),
    },
    {
      title: '计算值2',
      dataIndex: 'calculationTw',
      key: 'calculationTw',
      align: 'center',
      minWidth: '160px',
      render: (text, record, index) => (
        <UdSelect
          options={getFinancialField()}
          showSearch={true}
          optionFilterProp="children"
          value={record.calculationTw + ''}
          onChange={value => {
            triggerChange({ record, index, key: 'calculationTw', fieldValue: value })
          }}
        />
      ),
    },
    {
      title: '操作',
      dataIndex: 'hand',
      align: 'center',
      minWidth: '120px',
      render: columnRenders.operate([
        {
          title: '删除',
          action: (text, record, index) => {
            triggerChange({ record, index, type: 'delete' })
          },
        },
      ]),
    },
  ]

  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <Button
          type="primary"
          onClick={() => {
            triggerChange({ type: 'add' })
          }}
        >
          添加条件
        </Button>
      </div>
      <UdTable rowKey="vid" columns={columns} dataSource={value} pagination={false} />
    </>
  )
}

const PlanTableRef = React.forwardRef((props: any, ref: any) => {
  return <PlanTable {...props} />
})

export default React.memo(PlanTableRef)
